<template>
	<div>
		<div class="header8">
			<i class="icon_fanhui" @click="tiaoYe"></i>
		</div>
		<div class="upload">
			<input type="file" id="imgLocal" @change="change1($event)" />
		</div>
		<div class="huan">
			<i></i>
		</div>
		<div class="ure">
			<i class="icon_ure">
				<img src="../assets/1.jpg" ref='pic'>
			</i>
			<p v-show="isShow" >{{ ureName }}</p>
			<input type="text" class="inpu" v-model="ureName" v-if="isIf" @blur="changeUre" />
			<i class="icon_xiugai" @click="changeShwoIf"></i>
		</div>
		<div class="content4">
			<div class="content4_sub" @click="Jump">
				<div>收藏中心</div>
				<div><i class="icon_jiantou"></i></div>
			</div>
		</div>
		<div class="content5">
			<div class="content4_sub">
				<div>消息中心</div>
				<div><i class="icon_jiantou"></i></div>
			</div>
		</div>
		<div class="signOut">
			<span @click="signOut">退出登录</span>
		</div>
	</div>
</template>

<script>
	export default{
		data:function(){
			return{
				isShow:true,
				isIf:false,
				ureName:JSON.parse(localStorage.getItem('userinfo')).username,
				pic7:'',
			}
		},
		mounted() {
			this.$refs.pic.src = JSON.parse(localStorage.getItem('userinfo2')).src
		},
		watch:{
			pic7:function(){
				this.$refs.pic.src = JSON.parse(localStorage.getItem('userinfo2')).src
			}
		},
		methods:{
			changeShwoIf:function(){
				this.isShow = false
				this.isIf = true
			},
			changeUre:function(){
				this.isShow = true
				this.isIf = false
				// console.log(this.$route.query)
				this.$axios.post('http://chonghekj.com/daily/index.php/Home/user/edit',this.$qs.stringify({
					id:JSON.parse(localStorage.getItem('userinfo')).id,
					access_token:JSON.parse(localStorage.getItem('userinfo')).access_token,
					username:this.ureName
				})).then((res)=>{
					console.log(res)
				})
				
			},
			signOut:function(){
				this.$axios.post('http://chonghekj.com/daily/index.php/Home/user/logout',this.$qs.stringify({
					id:JSON.parse(localStorage.getItem('userinfo')).id,
					access_token:JSON.parse(localStorage.getItem('userinfo')).access_token,
				})).then((res)=>{
					console.log(res)
					if(res.data.info == '登出成功'){
						this.$router.push({
							path:'/login'
						})
						// localStorage.clear()
						localStorage.removeItem('userinfo')
					}
				})
			},
			change1: function(e) {
				console.log(e)
				let a = e.target.files[0]
				console.log(a)
				let file = new FormData()
				file.append('file', a)
				file.append('id', 1207)
				file.append('access_token', JSON.parse(localStorage.getItem('userinfo')).access_token)
				this.$axios.post('http://chonghekj.com/daily/index.php/Home/user/uploadAvatar', file, {
					'Content-Type': 'multipart/form-data'
				}).then((res) => {
					console.log(res)
					this.pic7 = 'http://chonghekj.com'+res.data.data
					localStorage.setItem('userinfo2', JSON.stringify({
						src:'http://chonghekj.com'+res.data.data
					}))
				})
			
			},
			tiaoYe:function(){
				this.$router.push({
					path:'/',
				})
			},
			Jump:function(){
				this.$router.push({
					path:'/collectionPage'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header8{
		margin-top: 10px;
		.icon_fanhui{
			width: 25px;
			height: 25px;
			display: block;
			background: url(../assets/jiantou_logo.png) no-repeat;
			background-size: 100% 100%;
			margin-left: 13px;
			margin-top: 1px;
		}
	}
	.ure{
		text-align: center;
		position: relative;
		padding-bottom: 20px;
		//改
		.icon_ure{
			width: 66px;
			height: 63px;
			display: inline-block;
			// background: url(../assets/nan.png) no-repeat;
			// background-size: 100% 100%;
			margin-bottom: 7px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		p{
			margin: 0!important;
		}
		.icon_xiugai{
			width: 20px;
			height: 20px;
			display: block;
			position: absolute;
			background: url(../assets/xiugai.png) no-repeat;
			background-size: 100% 100%;
			right: 94px;
			top: 73px;
		}
		.inpu{
			display: block;
			width: 90px;
			margin-left: 155px;
			border: none;
			height: 28px;
			margin-top: -5px;
		}
	}
	.content4{
		border-top: 1px solid #F1F3F4;
		border-bottom: 1px solid #F1F3F4;
		.content4_sub{
			padding: 15px 15px;
			display: flex;
			justify-content: space-between;
			.icon_jiantou{
				display: block;
				width: 20px;
				height: 20px;
				background: url(../assets/jiantou_right.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
	.content5{
		.content4_sub{
			padding: 10px 15px;
			display: flex;
			justify-content: space-between;
			.icon_jiantou{
				display: block;
				width: 20px;
				height: 20px;
				background: url(../assets/jiantou_right.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
	.signOut{
		text-align: center;
		margin-top: 50px;
		span{
			border: 1px #6E6E6E solid;
			padding: 5px 15px;
			border-radius: 5px;
		}
	}
	.header7 {
		text-align: center;
		background: #F3F3F3;
		padding: 15px 0;
		position: relative;
		i {
			position: absolute;
			width: 25px;
			height: 25px;
			background: url(../assets/jiantou_logo.png) no-repeat;
			background-size: 100% 100%;
			left: 15px;
			top: 10px;
		}
	}
	//新加的
	.huan{
		position: absolute;
		left: 173px;
		top: 6px;
		i{
			width: 30px;
			height: 30px;
			display: block;
			background: url(../assets/huan.png) no-repeat;
			background-size: 100% 100%;
		}
	}
	.upload{
		position: absolute;
		z-index: 999;
		top: 7px;
		left: 151px;
		//新加的
		#imgLocal{
			//新加的
			width: 80px;
			opacity: 0;
		}
	}
</style>


<style>
</style>
